<template>

	<div style=" width: 100%; display: flex;">

		<div :class="{width_f:width_f,width_s:width_s }">
			<div style=" display: flex; justify-content: space-around;">
				<h2 align="center">学生显示</h2>
				<button v-on:click="go2add()">添加新同学</button>
			</div>
			<table style="border: 1px solid; width: 100%; ">

				<tr>
					<td align="center">学生姓名</td>
					<td align="center">手机号</td>
					<td align="center">班级id</td>
					<td align="center">班级名</td>
					<td align="center">头像</td>
					<td colspan="2" align="center">功能</td>
				</tr>

				<tr v-for="(s,idx) in stus">
					<td align="center">{{s.uname}}</td>
					<td align="center">{{s.phone}}</td>
					<td align="center">{{s.clz.clzno}}</td>
					<td align="center">{{s.clz.clzname}}</td>
					<!-- <td align="center" >{{x.pic}}</td> -->
					<td align="center"><img style="width: 10vb;height: 10vb;"
							v-bind:src="this.$ip +'/api/public/showimg/'+s.pic"></td>
					<td align="center"> <button v-on:click="go2update(s)">修改</button></td>
					<td align="center"> <button v-on:click="del(s)">删除</button></td>
				</tr>
				<tr>
					<div style="display: flex; justify-content: center;">
						<p><button v-on:click="move(-1)">上一页</button></p>
						<p>{{page.num}}/{{totalPage}}</p>
						<p><button v-on:click="move(1)">下一页</button></p>
					</div>
				</tr>
			</table>
		</div>
		<div id="save" v-if="actidx!=2" style="width: 30%; border: 1px solid blue; ">
			<h2 v-if="actidx!=1" align="center">学生添加</h2>
			<h2 v-if="actidx!=0" align="center">学生修改</h2>
			<hr />
			<table style="border: 1px solid; width: 100%;">
				<tr>
					<td align="center">学生姓名</td>
					<td align="center">
						<input type="text" v-model="formObj.uname" />
					</td>
				</tr>

				<tr>

					<td align="center">手机号</td>
					<td align="center">
						<input type="text" v-model="formObj.phone" />

					</td>
				</tr>

				<tr>
					<td align="center">课程</td>
					<td align="center">
						<select v-model="formObj.clz.clzno" style="width: 70%; font-size: 1pc;">
							<option align="center" v-for="c in clzs" v-bind:value="c.clzno">
								{{c.clzname}}
							</option>
						</select>
					</td>
				</tr>
			</table>
			<div v-if="actidx==0" style="width:20vb;height: 20vb">
				<img v-bind:src="`${this.$ip}/api/public/showimg/`+formObj.pic" style="width: 100%;height: 100%">
			</div>
			<p>图片: <input type="file" ref="img"> </p>

			<div style="display: flex; justify-content: space-between;">
				<p>&nbsp;</p>
				<p><button v-on:click="save()">确定</button></p>
				<p> <button v-on:click="saveout()">取消</button></p>
				<p>&nbsp;</p>
			</div>
		</div>
	</div>

</template>

<script>
	import {
		computed
	} from 'vue';
	export default {

		name: 'Stu',

		data() {
			return {
				formObj: {
					clz: {}
				},
				stus: [],
				clzs: [],
				width_f: true,
				width_s: false,
				actmsg: ['修改', '添加', '显示'],
				actidx: 2,
				page: {
					num: 1,
					lines: 6,
					total: 0
				}
			}
		},

		methods: {
			save() {
				var that = this;
				let url = "/api/adm/stu/add"
				if (this.actidx == 0) {
					url = "/api/adm/stu/update"
				}
				console.log(url)
				console.log(that.formObj)
				var fd = new FormData;
				fd.append("uid", parseInt(this.formObj.uid))
				fd.append("uname", this.formObj.uname)
				fd.append("phone", this.formObj.phone)
				fd.append("pwd", this.formObj.pwd)
				fd.append("clz.clzno", this.formObj.clz.clzno)
				// 获取图片
				var file = this.$refs.img.files[0]; //获取文件上传第一个文件内容
				fd.append("mypic", file);
				var that = this;
				this.$axios.post(this.$ip + url, fd, {
					headers: {
						'Authorization': 'Bearer ' + window.localStorage.getItem("token")
					}
				}).then(function(resp) {
					console.log(resp.data);


					that.$axios.get(that.$ip + "/api/adm/stu/findAll", {
						headers: {
							'Authorization': 'Bearer ' + window.localStorage.getItem("token")
						}
					}).then(function(resp) {
						console.log(resp.data.data)
						console.log("111")
						that.stus = resp.data.data;
					})



				})
			},
			saveout() {
				this.actidx = 2;
				this.width_f = true;
				this.width_s = false;
			},
			go2add() {
				this.$router.push({
					path: '/adm/add',
					query: {
						uid: 0
					}
				})

			},
			go2update(s) {
				this.$router.push({
					path: '/adm/add',
					query: {
						uid: s.uid
					}
				})

			},
			del(s) {
				console.log(s.uid)
				var that = this;
				this.$axios.get(`${this.$ip}/api/adm/stu/del?uid=` + s.uid, {
					headers: {
						'Authorization': 'Bearer ' + window.localStorage.getItem("token")
					}
				}).then(function(resp) {
					that.stus = resp.data.data

				})
			},
			move(n) {
				this.page.num = this.page.num + n;
				if (this.page.num > this.totalPage) {
					this.page.num = this.totalPage;
					return;
				}
				if (this.page.num < 1) {
					this.page.num = 1;
					return;
				}

				var that = this;
				this.$axios.get(`${this.$ip}` + "/api/adm/stu/findPage?pagenum=" + this.page.num + "&lines=" + this.page
					.lines, {
						headers: {
							'Authorization': 'Bearer ' + window.localStorage.getItem("token")
						}
					}).then(function(resp) {
					console.log(resp.data.data)
					that.stus = resp.data.data.students;
					that.page.total = resp.data.data.total;
					console.log(that.stus + " " + that.page.total)

				})

			}

		},
		computed: {
			totalPage() {
				let n = this.page.total % this.page.lines;
				console.log("取出余数" + n)
				// 获取当前页数
				var n1 = (this.page.total - n) / this.page.lines

				if (n > 0) { // 如果余数 那么页数加一
					n1 = n1 + 1;
				}
				console.log(n1)
				return n1;
			}
		},
		mounted() {
			let token = window.localStorage.getItem("token")
			var that = this;

			this.$axios.get(`${this.$ip}` + "/api/adm/stu/findPage?pagenum=" + this.page.num + "&lines=" + this.page
			.lines, {
				headers: {
					'Authorization': 'Bearer ' + token
				}
			}).then(function(resp) {
				console.log(resp.data.data)
				console.log("111")
				that.stus = resp.data.data.students;
				that.page.total = resp.data.data.total;
				console.log(that.stus + " " + that.page.total)

			})
		}
	}
</script>

<style>
	.width_f {
		width: 100%;
	}

	.width_s {
		width: 70%;
	}

	#save input {
		width: 70%;
	}
</style>